<template>


    <div class="black" v-if="open1"></div>
<audio ref="error" src="https://ziyuan.windbless.top/sounds/lakk/%E5%BE%88%E6%8A%B1%E6%AD%89%EF%BC%8C%E6%8B%BC%E5%9B%BE%E5%87%BA%E7%8E%B0%E9%94%99%E8%AF%AF%EF%BC%8C%E8%AF%B7%E9%87%8D%E6%96%B0%E6%8B%BC%E5%9B%BE%E3%80%82.mp3"></audio>
    <div :style="{ '$num': blocknum }" class="game1A">


        <div class="right">
            <div class="imgbox">答案：
                <img class="answerimg" :src="`${config.Target}${props.img}`" alt="">
            </div>
            <div class="choose" ref="draggableContainer">
                <img class="draggable" v-for="(img, index) in imgSrcArray1" :key="index" :src="`${config.Target}${img}`"
                    alt="">
            </div>

        </div>
        <div class="imgboxx">
            <div class="mainother">
                <div :style="`min-width:${widthblock} ;`" :class="`otheritem${index}`" v-for="(item, index) in othermap"
                    :key="index"><img v-if="item[0] != null" :src="`${config.Target}${item[0]}`" alt=""></div>
            </div>
            <div class="main">
                <div :style="`min-width:${widthblock} ;`" :class="`item${index}`" v-for="(item, index) in blocknum"
                    :key="index"></div>
            </div>
            <a-button class="okbtn" @click="ok">OK</a-button>
        </div>




    </div>
</template>

<script setup>
import api from '@/api/user.js'
import config from '@/config/config.js'
import { ref, onMounted, defineEmits, watch, onUnmounted } from 'vue';
import Sortable from 'sortablejs';
import { useAuthStore } from '@/store/index.ts'
import { message } from 'ant-design-vue';
const emits = defineEmits(['next']);
const error = ref(null);
const num = ref(0);
const store = useAuthStore();
const open1 = ref(false);
const props = defineProps({
    img: {
        type: String,
        required: true
    },
    blocknum: {
        type: Number,
        required: true
    },
    imgSrcArray: {
        type: Array,
        required: true
    },
    correctanswer: {
        type: Array,
        required: true
    },
});

onUnmounted(() => {
    clearInterval(timer.value);
});
const items = ref([]);
watch(items, (newValue, oldValue) => {
    api.addroom({
        key: store.roomid,
        "othergame3": JSON.stringify(newValue)
    }).then((res) => {
        console.log(res);
    })
    // 在这里可以执行其他逻辑，比如更新相关状态或调用其他函数
}, { deep: true });
const imgSrcArray = ref([{
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1,
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}]);
const imgSrcArray1 = ref([{
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1,
}, {
    url: "/img/复杂JPEG/万圣节3.jpg",
    id: 1
}]);
const widthblock = ref();
const timer = ref(null);
const other = ref(null);
const othermap = ref(null);
onMounted(() => {
    imgSrcArray.value = props.imgSrcArray
    imgSrcArray1.value = [...props.imgSrcArray]
    // console.log(props.imgSrcArray);
    if (props.blocknum == 4) {
        widthblock.value = "50%"
    } else if (props.blocknum == 6) {
        widthblock.value = "33%"
    } else {
        widthblock.value = "25%"
    }
    for (let i = 0; i < props.blocknum; i++) {
        items.value.push([]);
    }
    initSortable();
    timer.value = setInterval(() => {
        getmessage();
    }, 1000);
});
const getmessage = () => {
    api.getroom({
        key: store.roomid
    }).then((res) => {
        if (res.data.game3 != null) {

            other.value = JSON.parse(res.data.game3);
            console.log(other.value);
        }
        if (res.data.game3num != null) {
            console.log(res.data.game3num);
            if (res.data.game3num == "ok") {
                emits('next', num.value);
                console.log("success");
            } else {
                message.error("答案错误")
                error.value.play();
                num.value = res.data.game3num
                open1.value = false;
            }

        }
        if (res.data.othergame3 != null) {

            // other.value = JSON.parse(res.data.game3);
            console.log(JSON.parse(res.data.othergame3));
            othermap.value = JSON.parse(res.data.othergame3);
        }
    })
}
const initSortable = () => {
    const container = document.querySelector('.choose');

    if (!container) return;

    new Sortable(container, {
        group: 'shared',
        handle: ".draggable",
        onEnd: evt => {
            const { newIndex, oldIndex } = evt;
            if (evt.to.className == "choose" && evt.from.className == "choose") {
                [imgSrcArray.value[newIndex], imgSrcArray.value[oldIndex]] = [imgSrcArray.value[oldIndex], imgSrcArray.value[newIndex]];
                console.log(imgSrcArray.value);
            }
            // if(form)
            if (newIndex === oldIndex) return;

        }, onAdd: evt => {
            console.log(evt);
            const parentEl = evt.to;
            const className = parentEl.className;
            const match = className.match(/item(\d+)/);
            if (evt.from && evt.from.className.startsWith('item')) {

                const parentElfrom = evt.from;
                const classNamefrom = parentElfrom.className;
                const matchfrom = classNamefrom.match(/item(\d+)/);
                console.log(evt);
                imgSrcArray.value.splice(evt.newIndex, 0, items.value[matchfrom[1]][0]);
                items.value[matchfrom[1]].pop();

            }
            console.log(items.value);
        }
    });
    for (let i = 0; i < props.blocknum; i++) {
        const item = document.querySelector(`.item${i}`);
        new Sortable(item, {
            group: {
                name: 'shared', // set both lists to same group
                put: function judge() {

                    if (items.value[i].length < 1) {
                        return true
                    }
                    return false;
                }
            },

            animation: 150,
            onAdd: evt => {
                const parentEl = evt.to;
                const className = parentEl.className;
                const match = className.match(/item(\d+)/);
                if (evt.from && evt.from.className.startsWith('item')) {

                    const parentElfrom = evt.from;
                    const classNamefrom = parentElfrom.className;
                    const matchfrom = classNamefrom.match(/item(\d+)/);
                    items.value[match[1]].push(items.value[matchfrom[1]][0]);
                    items.value[matchfrom[1]].pop();


                } else {
                    items.value[match[1]].push(imgSrcArray.value[evt.oldDraggableIndex]);
                    imgSrcArray.value.splice(evt.oldDraggableIndex, 1)

                }

            },
        });
    }

};
const ok = (i) => {

    if (other.value == null) {
        console.log("o");
        api.addroom({
            key: store.roomid,
            "game3": JSON.stringify(items.value)
        }).then((res) => {
            console.log(res);
        })
        message.loading("等待对方响应")
        open1.value = true;
        console.log(items.value);
    } else {
        for (let index in other.value) {
            console.log(items.value);
            if (other.value[index].length == 0) {
                other.value[index] = items.value[index]
            }
        }
        console.log(JSON.stringify(other.value.flat()));
        console.log(JSON.stringify(props.correctanswer));
        if (JSON.stringify(other.value.flat()) == JSON.stringify(props.correctanswer)) {
            console.log("res");
            api.addroom({
                key: store.roomid,
                "game3num": "ok"
            }).then((res) => {
                emits('next', num.value);
                console.log(res);
            })
        } else {
            message.error("答案错误")
            api.addroom({
                key: store.roomid,
                "game3num": num.value++
            }).then((res) => {
                console.log(res);
            })
            other.value = null
        }
    }
    console.log(items.value);
}
</script>

<style scoped lang="scss">
.imgbox img {
    // z-index: 1;
    // width: 100%;
    // height: 30px;
}

.imgbox {
    height: 30%
}

.answerimg {
    height: 100%
}

$num: 4;

.black {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    z-index: 3;
    opacity: 0.6;
    background-color: black;
}

.game1A {
    background-size: 100% 100%;
    // background-color: antiquewhite;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 2rem;
    border: #f5ca8e solid 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 1rem;
    $num: 4;
    position: relative;

    .okbtn {
        margin-top: 1rem;
        font-size: 2rem;
        height: 4rem;
        bottom: 5%;
        position: absolute;
    }

    .imgboxx {
        position: relative;
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .mainother {
            position: absolute;
            margin-top: -10rem;

            // position: relative;
            width: 100%;
            height: 50%;
            display: flex;
            flex-wrap: wrap;
            opacity: 0.6;

            [class^="otheritem"] {
                flex: 1;

                @if var(--num)==4 {
                    width: 25%;
                }

                @if var(--num)==6 {
                    width: 50%;
                }

                height: 50%;
                border: black solid 1px;

                // background-color: red;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .main {
            margin-top: -10rem;
            position: absolute;
            width: 100%;
            height: 50%;
            display: flex;
            flex-wrap: wrap;

            [class^="item"] {
                flex: 1;

                @if var(--num)==4 {
                    width: 25%;
                }

                @if var(--num)==6 {
                    width: 50%;
                }

                height: 50%;
                border: black solid 1px;

                // background-color: red;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }



    .right {
        position: relative;
        height: 100%;
        width: 40%;

        .choose {
            margin-top: 3rem;
            // min-height: 30%;
            height: 60%;
            width: 100%;
            background-color: #f5ca8e;
            padding: 1%;
            display: flex;
            // flex-direction: column;
            gap: 1%;
            flex-wrap: wrap;

            img {
                display: inline-block;

                max-height: 50%;
                width: 49%;
            }
        }


    }

}
</style>